<template>
	<view class="details" :style="{backgroundColor:bgColor}">
		<!-- 预告片 -->
		<video :src="details.vd" autoplay controls></video>
		<!-- 电影基本信息 -->
        <view class="info">
			<view class="pic">
				<image :src="details.img" mode=""></image>
			</view>
			<view class="content">
				<view class="name">{{details.nm}}</view>
				<view class="scm">{{details.scm}}</view>
				<view class="cat">{{details.cat}}</view>
				<view class="dir">{{details.dir}}/{{details.star}}</view>
				<view class="showinfo">{{details.pubDesc}}/{{details.dur}}分钟</view>
				
			</view>
		</view>
		<!-- 猫眼评分 -->
		<view class="rating">
			<!-- 第一行 -->
			<view class="desc">
				<view class="title">猫眼评分</view>
				<view class="wish">{{details.wish}}想看/{{details.watched}}看过</view>
			</view>
			<!-- 第二行 -->
			<view class="sc">
				<!-- 左侧 -->
				<view class="sc1">
					<view class="sc2">{{details.sc}}分</view>
					<view class="comment">{{details.snum}}评分</view>
				</view>
				<!-- 右侧 -->
				<view class="start">
					<view v-if="details.distributions">
						<view>☆☆☆☆☆{{details.distributions[0].proportion}}%</view>
						<view>☆☆☆{{details.distributions[1].proportion}}%</view>
						<view>☆{{details.distributions[2].proportion}}%</view>						
					</view>
				</view>
			</view>
			
		</view>
		<!-- 电影海报 -->
		<view class="photos">
			<view class="title">海报</view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item,index in details.photos" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
				
			</swiper>
		</view>
		<!-- 电影简介 -->
		<view class="introduce">
			<view class="title">简介</view>
			<view class="msg">{{details.dra}}</view>
		</view>
		<view class="btn">
			<button type="default">去猫眼看看</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	//电影id
	let id = "";
	onLoad((params) => {
		console.log(params.movieId)
		id = params.movieId
		getDetails(id)

	})
	// 电影详情对象
	const details = ref({})
	// 电影详情中的背景颜色
	const bgColor = ref("")
	async function getDetails(movieId) {
		let res = await uni.$get("https://m.maoyan.com/ajax/detailmovie", {
			movieId
		})
		console.log(res)
		// 电影详情
		details.value = res.data.detailMovie
		// 背景颜色
		bgColor.value = res.data.detailMovie.backgroundColor
		console.log(details.value)
		console.log(bgColor.value);
		//设置导航栏标题和背景色
		uni.setNavigationBarColor({
			backgroundColor: bgColor.value,
			frontColor:"#ffffff"
		})
		uni.setNavigationBarTitle({
			title:details.value.nm
		})
	}
</script>

<style lang="scss" scoped>
	.details{
		color: #fff;
		font-size: 26rpx;
		video{
			width: 100%;
		}
		//电影基本信息
		.info{
			margin: 10px;
			display: flex;
			justify-content: space-around;
			.pic{
				width: 250rpx;
				height: 400rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.content{
				width: 440rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.name{
					font-size: 35rpx;
				}
			}
		}
		//猫眼评分
		.rating{
			border:1px solid #eee;
			border-radius:10px;
			margin: 10px;
			padding: 10px;
			background-color: #00000033;
			.desc{
				display: flex;
				justify-content: space-around;
				.title{
					font-size: 36rpx;
					color:gold;
				}
				.wish{
					font-size: 30rpx;
				}
			}
			.sc{
				margin-top: 10px;
				display: flex;
				justify-content: space-around;
				.sc1{
					display: flex;
					flex-direction: column;
					justify-content: center;
					.sc2{
						font-size: 40rpx;
						color: gold;
					}
					
				}
				.start{
					view{
				         text-align: right;
						 color: gold;
					}
				}
			}
		}
		
		//海报
		.photos{
			.title{
				margin: 5px;
				font-size: 30rpx;
			}
			swiper{
				height: 200px;
				image{
					width: 100%;
				}
			}
		}
	     // 简介
		 .introduce{
			 .title{
				 font-size: 30rpx;
				 margin: 5px;
				 
			 }
			 .msg{
				 margin: 10px;
				 line-height: 40rpx;
			 }
		 }
		 .btn{
			padding: 20px;
			 
		 }
	}

</style>